<template>
  <div>
    <el-card class="box-card">
      <!-- 右上角二维码切角（SVG二维码图案，沿对角线裁剪只保留右上角，黑色风格） -->
      <div class="card-corner-qr" @click="goQrLogin" title="二维码登录">
        <svg width="64" height="64" viewBox="0 0 48 48">
          <defs>
            <clipPath id="qr-diag-cut">
              <polygon points="48,0 48,48 0,0" />
            </clipPath>
          </defs>
          <g clip-path="url(#qr-diag-cut)">
            <rect x="2" y="2" width="12" height="12" fill="#fff" stroke="#000" stroke-width="2" />
            <rect x="6" y="6" width="4" height="4" fill="#000" />
            <rect x="34" y="2" width="12" height="12" fill="#fff" stroke="#000" stroke-width="2" />
            <rect x="38" y="6" width="4" height="4" fill="#000" />
            <rect x="2" y="34" width="12" height="12" fill="#fff" stroke="#000" stroke-width="2" />
            <rect x="6" y="38" width="4" height="4" fill="#000" />
            <rect x="20" y="20" width="4" height="4" fill="#000" />
            <rect x="28" y="28" width="4" height="4" fill="#000" />
            <rect x="20" y="28" width="4" height="4" fill="#000" />
            <rect x="28" y="20" width="4" height="4" fill="#000" />
          </g>
        </svg>
      </div>
      <h2>用户登录</h2>
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-position="left" label-width="80px" class="login-form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="button-group">
        <el-button type="primary" @click="submitForm('ruleForm')"
                   :loading="loading">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <router-link to="/register">
          <el-button style="margin-left: 10px">注册</el-button>
        </router-link>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        role: ''
      },
      loading: false,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        this.loading = true;
        if (valid) {
          this.$axios({
            url: "/api/user/login",
            method: "post",
            headers: {
              "Content-Type": "application/json"
            },
            params: {
              name: this.ruleForm.username,
              password: this.ruleForm.password,
              role: this.ruleForm.role
            }
          }).then((res) => {
            if (res.data.code === '0') {
              sessionStorage.setItem("user", JSON.stringify(res.data.data));
              this.$router.push("/home");
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
            }
            else {
              this.$message({
                message: res.data.msg,
                type: 'warning'
              })
            }
            this.loading = false;
            console.log(res);

          })
        }
        else {
          console.log('error submit!!');
          this.loading = false;
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goQrLogin() {
      this.$router.push('/qr-login');
    }
  }
}

</script>

<style>
.box-card {
  margin: auto auto;
  width: 400px;
  position: relative;
}

.login-from {
  margin: auto auto;
}

/* 卡片右上角二维码切角（SVG二维码） */
.card-corner-qr {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  cursor: pointer;
  z-index: 10;
  background: #fff;
  border-bottom-left-radius: 16px;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.08);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  transition: filter 0.2s;
  padding: 0;
}

.card-corner-qr:hover {
  filter: brightness(1.2);
  box-shadow: 0 4px 16px rgba(103, 194, 58, 0.18);
}

.button-group {
  margin-top: 10px;
}
</style>